<template>
  <div style="display: flex;">
    <el-input v-model="search_keyword" placeholder="查询关键词" :style="'border: solid 5px ' + color_idx">
      <template #prepend>
        <el-button type="success">
          <el-icon style="vertical-align: middle">
            <el-icon>
              <Search/>
            </el-icon>
          </el-icon>
        </el-button>
      </template>
      <template #append>
        <span>关键词查找</span>
      </template>
    </el-input>
  </div>
  <div class="title_spec" :style="'background-color: ' + color_idx">
    <el-button type="success" size="small" plain class="btn_refresh"
               @click="get_spec_by_session_token">刷新
    </el-button>
    <span>{{ title_spec }}</span>
  </div>
  <div id="spec_show" v-loading="loading_spec_show">
    <div v-for="(line, idx) in spec_lines" :key="idx">
      <span class="line_idx" :style="'background-color: ' + color_idx + '; width: ' + idx_width">{{ idx + 1 }}</span>
      <span :id="idx_random + '_line_'+ idx">{{ line }}</span>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import randomFunction from '@/utils/random'
import {Search} from '@element-plus/icons-vue'

export default {
  name: "readerForSPEC",
  components: {Search},
  props: {
    sessionToken: String,
    searchKeyWord: {
      type: String,
      default: ""
    },
    colorIdx: {
      type: String,
      default: "#8cc5ff"
    },
    titleSPEC: {
      type: String,
      default: ""
    },
    codeSource: {
      type: String,
      default: "gitee"
    },
    spec_path: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      spec_lines: [],
      search_keyword: "",
      color_idx: "",
      title_spec: "",
      idx_random: "",
      idx_width: "30px",
      loading_spec_show: true
    }
  },
  methods: {
    get_spec_by_session_token() {
      if (this.spec_path === "") return
      let obj_this = this
      obj_this.loading_spec_show = true
      let data = {
        "session_token": obj_this.sessionToken,
        "spec_path": obj_this.spec_path,
      }
      axios.post('/get_spec_by_session_token', data).then(function (response) {
        obj_this.spec_lines = response.data.data
        obj_this.idx_width = obj_this.spec_lines.length.toString().length * 11 + "px"
        obj_this.loading_spec_show = false
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      }).then(function () {
        obj_this.search_by_keyword(obj_this.search_keyword)
      });
    },
    search_by_keyword(keyword) {
      if (keyword === "") return
      let obj_this = this
      let arr = document.getElementsByClassName("search_line_" + obj_this.idx_random);
      for (let j = 0; j < arr.length; j++) {
        arr[j].classList.remove("search_line_" + obj_this.idx_random);
      }
      for (let i = 0; i < obj_this.spec_lines.length; i++) {
        if (obj_this.spec_lines[i].indexOf(keyword) !== -1) {
          let obj_find = document.getElementById(obj_this.idx_random + "_line_" + i)
          obj_find.scrollIntoView({behavior: "instant", block: "center", inline: "nearest"})
          obj_find.classList.add("search_line_" + obj_this.idx_random);
        }
      }
    },

  },
  created() {
    this.get_spec_by_session_token()
    this.search_keyword = this.searchKeyWord
    this.color_idx = this.colorIdx
    this.title_spec = this.titleSPEC
    this.idx_random = randomFunction.getRandomString(5)
    let style = document.createElement('style')
    style.type = 'text/css';
    style.innerHTML = ".search_line_" + this.idx_random + "{background-color: #ffd4d4;}"
    document.querySelector("head").appendChild(style)
  },
  watch: {
    search_keyword: {
      handler(newName, oldName) {
        this.log_keyword = newName + oldName
        if (newName !== "")
          this.search_by_keyword(newName)
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style scoped>
#spec_show {
  max-height: 200px;
  overflow: auto;
}

.line_idx {
  width: 30px;
  display: inline-block;
  text-align: right;
  padding-right: 3px;
  user-select: none;
}

.title_spec {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-indent: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.btn_refresh {
  margin-top: -4px;
  margin-right: 5px;
  opacity: 0.8;
  transition: 0.5s;
}

.btn_refresh:hover {
  opacity: 1;
}

.search_line {
  background-color: #ffd4d4;
}
</style>